<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css"
	href="js/easyui/themes/default/easyui.css" />
<!--EasyUI的图标样式-->
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" />
<!--jquery的核心JS-->
<script type="text/javascript" src="js/easyui/jquery.min.js"></script>
<!--jquery EasyUI的核心JS-->
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<!-- 信息本地化js文件 -->
<script type="text/javascript"
	src="js/easyui/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
.btn-danger {
	background-color: red;
	border-radius: 8px;
	border: 0;
	outline: none;
	cursor: pointer
}

.btn-success {
	background-color: forestgreen;
	border-radius: 8px;
	border: 0;
	outline: none;
	cursor: pointer
}

.btn-info {
	background-color: #269ABC;
	border-radius: 8px;
	border: 0;
	outline: none;
	cursor: pointer
}
</style>
</head>

<body style="background-color: #EEEEEE;">
	<div style="background-color: white;" class="top">
		<span style="margin-left: 10px;">规则名称</span> <input
			class="easyui-textbox" style="width: 200px; height: 25px;"> <span>规则状态</span>
		<select id="cc" class="easyui-combobox" name="dept"
			style="width: 200px;"
			data-options="editable:false,panelHeight:'auto'">
			<option value="aa">aitem1</option>
			<option>bitem2</option>
			<option>bitem3</option>
			<option>ditem4</option>
			<option>eitem5</option>
		</select> <a id="btn" href="#" class="easyui-linkbutton"
			data-options="iconCls:'icon-search'">搜索</a> <a id="btn" href="#"
			class="easyui-linkbutton" data-options="iconCls:'icon-reload'">重置</a>
		<a id="btn" href="#" class="easyui-linkbutton"
			data-options="iconCls:'icon-add'">添加</a>
	</div>
	<div id="dg">
		<!-- <table class="easyui-datagrid" id="dg" data-options="singleSelect:true,collapsible:true,method:'get',align:'center'" style="width: 100%; height:  800px;">
				<thead>
					<tr>
						<th field="cb" checkbox="true" align="center"></th>
						<th data-options="field:'id',width:'17%',align:'center'">序号</th>
						<th data-options="field:'name',width:'17%',align:'center'">规则名称</th>
						<th data-options="field:'deptno',width:'17%',align:'center'">仓库</th>
						<th data-options="field:'job',width:'17%',align:'center'">规则类型</th>
						<th data-options="field:'sal',width:'17%',align:'center'">创建人</th>
						<th data-options="field:'time',width:'16%',align:'center'">创建时间</th>
						<th data-options="field:'remarks',width:'16%',align:'center'">备注</th>
						<th data-options="field:'state',width:'16%',align:'center'">规则状态</th>
						<th data-options="field:'operation',width:'16%',align:'center'">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td> </td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td><button class="btn-success">正常</button></td>

						<td><button class="btn-info">修改</button>
							<button class="btn-danger">禁用</button></td>

					</tr>
					<tr>
						<td> </td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td><button class="btn-success">正常</button></td>

						<td><button class="btn-info">修改</button>
							<button class="btn-success">启用</button></td>

					</tr>
					<tr>
						<td> </td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td><button class="btn-danger">禁用</button></td>

						<td><button class="btn-info">修改</button>
							<button class="btn-danger">禁用</button></td>

					</tr>
					<tr>
						<td> </td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td><button class="btn-success">正常</button></td>

						<td><button class="btn-info">修改</button>
							<button class="btn-danger">禁用</button></td>

					</tr>
					<tr>
						<td> </td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td><button class="btn-danger">禁用</button></td>

						<td><button class="btn-info">修改</button>
							<button class="btn-danger">禁用</button></td>

					</tr>
					<tr>
						<td> </td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
						<td><button class="btn-success">正常</button></td>

						<td><button class="btn-info">修改</button>
							<button class="btn-danger">禁用</button></td>

				</tbody>

			</table>
 -->
	</div>

</body>
<script type="text/javascript">
	$('#dg').datagrid({
		scrollbarSize : 0,
		method : 'get',
		url : '/test1',
		height : window.innerHeight - 45,
		pagination : true,
		loadMsg : '正在加载中，请稍等... ',
		nowrap : false, //允许换行
		fitColumns : true, //宽度自适应
		emptyMsg : '<span>无记录</span>',
		onLoadSuccess : function(data) { // Fires when data is
			var classify = $("#classify").val();
			$('#frequencyPp').pagination('refresh', {
				total : data.total,
				pageNumber : data.page,
				classify : classify
			});
		},
		columns : [ [ {
			field : 'ck',
			title : '',
			width : 20, //当 fitColumns:true时，columns里的width变为改列宽度占表格总宽度大小的比例
			align : 'center',
			checkbox : true

		}, {
			field : 'id',
			title : '序号',
			width : 100, //当 fitColumns:true时，columns里的width变为改列宽度占表格总宽度大小的比例
			align : 'center'
		}, {
			field : 'name',
			title : '规则名称',
			width : 100,
			align : 'center'
		}, {
			field : 'deptno',
			title : '仓库',
			width : 100,
			align : 'center',
			editor : 'text'
		}, {
			field : 'job',
			title : '规则类型',
			width : 100,
			align : 'center',
			editor : 'text'
		}, {
			field : 'sal',
			title : '创建人',
			width : 100,
			align : 'center',
			editor : 'text'
		}, {
			field : 'time',
			title : '创建时间',
			width : 100,
			align : 'center',
			editor : 'text'
		}, {
			field : 'remarks',
			title : '备注',
			width : 100,
			align : 'center',
			editor : 'text'
		}, {
			field : 'state',
			title : '规则状态',
			width : 100,
			align : 'center',
			editor : 'text'
		}, {
			field : 'operation',
			title : '操作',
			width : 100,
			align : 'center',
			editor : 'text'
		} ] ]
	});
</script>

</html>